<template>
	<view class="BodyPage">
		<image
			src="../../../static/back.png"
			mode=""
			class="backIcon"
			@click="
				$u.route({
					type: 'back'
				})
			"
		></image>
		<view class="container" :class="active ? 'active' : ''">
			<!--图标库 可无视-->
			<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

			<!--核心样式-->
			<link rel="stylesheet" href="css/form.css" />
			<view class="card" style="top: 150upx;"></view>
			<view class="card">
				<h1 class="title">用户登录</h1>
				<form>
					<view class="input-container">
						<input type="text" required="required" @focus="inputFocusFun('loginPhone')" @blur="inputBlurFun('loginPhone')" v-model="form['loginPhone']" />
						<label :class="inputFocus['loginPhone'] ? 'inputFocus' : ''">手机号码</label>
						<view class="bar"></view>
					</view>
					<view class="input-container">
						<input type="text" required="required" @focus="inputFocusFun('loginPassword')" @blur="inputBlurFun('loginPassword')" v-model="form['loginPassword']" />
						<label :class="inputFocus['loginPassword'] ? 'inputFocus' : ''">密码</label>
						<view class="bar"></view>
					</view>
					<view class="button-container" @click="login()">
						<button><span>登录</span></button>
					</view>
				</form>
			</view>
			<view class="card alt">
				<view class="toggle" @click="active = true"></view>
				<h1 class="title">
					会员开卡
					<view class="close" @click="active = false"></view>
				</h1>
				<form>
					<view class="input-container">
						<input type="text" required="required" @focus="inputFocusFun('registerPhone')" @blur="inputBlurFun('registerPhone')" v-model="form['registerPhone']" />
						<label :class="inputFocus['registerPhone'] ? 'inputFocus' : ''">手机号</label>
						<view class="bar"></view>
					</view>
					<view class="input-container">
						<input
							type="text"
							required="required"
							@focus="inputFocusFun('registerPassword')"
							@blur="inputBlurFun('registerPassword')"
							v-model="form['registerPassword']"
						/>
						<label :class="inputFocus['registerPassword'] ? 'inputFocus' : ''">密码</label>
						<view class="bar"></view>
					</view>
					<view class="input-container">
						<input type="text" required="required" @focus="inputFocusFun('registerName')" @blur="inputBlurFun('registerName')" v-model="form['registerName']" />
						<label :class="inputFocus['registerName'] ? 'inputFocus' : ''">真实姓名</label>
						<view class="bar"></view>
					</view>
					<view class="button-container" @click="register()">
						<button><span>注册就诊卡</span></button>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			inputFocus: {
				loginPhone: false,
				loginPassword: false,
				registerPhone: false,
				registerPassword: false,
				registerName: false
			},
			form: {
				loginPhone: '',
				loginPassword: '',
				registerPhone: '',
				registerPassword: '',
				registerName: ''
			},
			active: false
		};
	},
	onLoad() {
	},
	methods: {
		inputFocusFun(name) {
			this.inputFocus[name] = true;
		},
		inputBlurFun(name) {
			if (this.form[name] == '') {
				this.inputFocus[name] = false;
			}
		},
		login() {
			if (this.$u.test.isEmpty(this.form['loginPhone']) || this.$u.test.isEmpty(this.form['loginPassword'])) {
				this.$u.toast('手机号或密码不能为空!');
				return;
			} else if (!this.$u.test.mobile(this.form['loginPhone'])) {
				this.$u.toast('手机号格式不规范!');
				return;
			}
			this.$u
				.post('/login/', {
					phone: this.form['loginPhone'],
					password: this.form['loginPassword']
				})
				.then(res_login => {
					this.$u.vuex('vuex_cardInfo', res_login);
					this.$u.toast(`登录成功！欢迎您！${res_login.name}`);
					this.$u.route({
						type: 'back'
					});
				})
				.catch(res_err => {
					this.$u.toast(res_err.data);
				});
		},
		register() {
			if (this.$u.test.isEmpty(this.form['registerPhone']) || this.$u.test.isEmpty(this.form['registerPassword']) || this.$u.test.isEmpty(this.form['registerName'])) {
				this.$u.toast('表单不能为空!');
				return;
			} else if (!this.$u.test.mobile(this.form['registerPhone'])) {
				this.$u.toast('手机号格式不规范!');
				return;
			}
			this.$u
				.post('/register/', {
					phone: this.form['registerPhone'],
					password: this.form['registerPassword'],
					name: this.form['registerName']
				})
				.then(res_register => {
					this.$u.vuex('vuex_cardInfo', res_register);
					this.$u.toast(`注册成功！欢迎您！${res_register.name}`);
					this.$u.route({
						type: 'back'
					});
				})
				.catch(res_err => {
					this.$u.toast(res_err.data);
				});
		}
	}
};
</script>

<style>
@import './css/form.css';
</style>

<style lang="scss">
.backIcon {
	position: fixed;
	top: 30upx;
	left: 10upx;
	width: 100upx;
	height: 100upx;
	z-index: 1;
}
</style>
